<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scaled=0">
    <title>座位管理系统</title>
    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/admin.css">
    <link rel="stylesheet" href="css/userCommod.css">
    <link rel="stylesheet" href="css/tsg_floor2.css">
    <!--[if lt IE 9]>
    <script src="assets/bootstrap/html5shiv/html5shiv.min.js"></script>
    <script src="assets/bootstrap/respond/respond.min.js"></script>

    <![endif]-->
</head>
<body>
<!--版心-->
<!--首行-->
<div class="tsg_topBar">
    <span></span>
</div>
<div class="container tsg_container">
    <!--预先区域-->
    <div class="tsg_main">
        <!--左上角信息-->
        <div class="tsg_nav">
            <a href="indexUser.html" class="tsg_up" title="上一页"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a href="http://tsg.asc.jx.cn/">黄金校区图书馆</a>
            <a href="#" class="tsg_bookDetail1"><span class="glyphicon glyphicon-option-vertical"></span>预约规则</a>
            <a href="userDetail.html"><span class="glyphicon glyphicon-option-vertical"></span>预约详情</a>
            <a href="#"><span class="glyphicon glyphicon-option-vertical"></span>个人信息</a>
        </div>
        <!--个人信息详情-->
        <div class="tsg_userDetail animated">
            <span class="glyphicon glyphicon-remove pull-right"></span>
            <form action="#">
                <table class="table">
                    <h4 class="text-center">个人信息详情</h4>
                    <tbody>
                    <tr>
                        <td><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</td>
                        <td class="user_name">汤露</td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-cd"></span>&nbsp;&nbsp;系&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</td>
                        <td class="user_xieBie">机电工程系</td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-cd"></span>&nbsp;&nbsp;专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业</td>
                        <td class="user_zhuangye">电气151</td>
                    </tr>
                    <tr>
                        <td> <span class="glyphicon glyphicon-globe"></span>&nbsp;&nbsp;预约地点</td>
                        <td class="user_where"></td>
                    </tr>
                    <tr>
                        <td> <span class="glyphicon glyphicon-question-sign"></span>&nbsp;&nbsp;预约状态</td>
                        <td class="user_statue"></td>
                    </tr>
                    <tr>
                        <td> <span class="glyphicon glyphicon-time"></span>&nbsp;&nbsp;预约日期</td>
                        <td class="user_date"></td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-dashboard"></span>&nbsp;&nbsp;预约时间</td>
                        <td class="user_time"></td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-unchecked"></span>&nbsp;&nbsp;预约座位</td>
                        <td class="user_seat"></td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;黑&nbsp;&nbsp;名&nbsp;&nbsp;单</td>
                        <td class="user_nameList">正常</td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-equalizer"></span>&nbsp;&nbsp;积分状态</td>
                        <td class="user_name">80</td>
                    </tr>
                    </tbody>
                </table>
                <button class="btn btn-default pull-right mr_50 btn_sure">确认</button>
            </form>
        </div>
        <!--预约规则详情-->
        <div class="tsg_bookDetail animated">
            <span class="glyphicon glyphicon-remove pull-right"></span>
            <h2 class="text-center">座位预约规则详细说明</h2>
            <ul class="fool-main-ul">
                <li>1. 可通过APP、网页方式预约。<br>
                    APP预约：下载安装APP后，首次使用前需点击“服务器设置”，选择“根据网址访问服务器”，地址为：seat.lib.whu.edu.cn；使用本人账号登录后即可预约。<br>
                    网页预约: 浏览器访问http://seat.lib.whu.edu.cn，使用学号登录后即可预约。
                </li>
                <li>2. 使用图书馆账号（一般为学号、人事号）及图书馆密码登录本系统。</li>
                <li>3. 开放预约时间：01:00到22:00可预约当日座位，22:45-23:50可预约次日座位,系统规定每人有100积分。</li>
                <li>4. 系统支持自选座位方式；预约到期保留30分钟，需在规定时间内刷卡入馆签到，在规定时间内未到馆签到，且未取消预约将记违约一次。</li>
                <li>5. 读者刷卡出馆后为暂离，超过暂离时间后，系统将自动释放座位，记违约一次；一般暂离时间为30分钟，用餐（中午11点至13点，下午17点至19点）暂离时间为60分钟。</li>
                <li>6. 读者离开座位不再使用时，须点击结束使用释放座位，否则视为违约。</li>
                <li>7. 请勿使用程序脚本等非正常方式使用本系统。</li>
            </ul>
        </div>
        <!--退出-->
        <div class="tsg_exit">
            <a href="javascript:;" title="退出到首页"><span class="glyphicon glyphicon-log-in"></span></a>
        </div>
        <div class="tsg_title_left text-center">
            <h3>二层座位区域选择</h3>
        </div>
        <!--预约楼层选择-->
        <div class="tsg_bg">
            <div class="floor2-A">
                二楼A区考研自习室
            </div>
            <div class="floor2-B1">
                2-B1
            </div>
            <div class="floor2-B2">
                3-B2
            </div>
        </div>
        <!--预约时间模块-->
        <div class="tsg_bookMoudle animated">
            <h3>请选择预约时间和具体预约时段</h3>
            <form action="#">
                <span class="glyphicon glyphicon-remove"></span>
                <span class="span2">日期选择</span>
                <ul class="bookDate">
                    <li class="data1">星期一</li>
                    <li class="data2">星期二</li>
                    <li class="data3">星期三</li>
                    <li class="data4">星期四</li>
                    <li class="data5">星期五</li>
                    <li class="data6">星期六</li>
                    <li class="data7">星期日</li>
                </ul>
                <span class="span2">时段选择</span>
                <ul class="bookTime" >
                    <li class="hour1">上午7:00--12:00</li>
                    <li class="hour2">下午1:00--5:30</li>
                    <li class="hour3">晚上7:00-10:00</li>
                </ul>
                <span class="span2">座位选择</span>
                <p>
                    <span class="glyphicon glyphicon-unchecked" style="background-color:red"></span>红色表示已经预约<br>
                    <span class="glyphicon glyphicon-unchecked" style="background-color:#ccc"></span>灰色表示空缺<br>
                    <span class="glyphicon glyphicon-unchecked" style="background-color:yellow"></span>黄色表示选择成功
                </p>
                <div class="bookSeat">
                    <span class="seat">座位1</span>
                    <span style="background-color:red" class="seated">座位2</span>
                    <span class="table">桌子</span>
                    <span class="seat">座位3</span>
                    <span class="seat">座位4</span>
                </div>
                <a href="#" class="btn btn-success ">提交</a>
                <!--预约成功模块-->
                <div class="bookSuccess animated">
                    <form action="#">
                        <table class="table" width="500" border="1">
                            <span class="glyphicon glyphicon-remove text-right"></span>
                            <h2 class="text-center">您的预约信息</h2>
                            <tbody>
                            <tr>
                                <td>预约地点</td>
                                <td class="table_where"></td>
                            </tr>
                            <tr>
                                <td>预约日期</td>
                                <td class="table_date"></td>
                            </tr>
                            <tr>
                                <td>预约时段</td>
                                <td class="table_time"></td>
                            </tr>
                            <tr>
                                <td>座位号码</td>
                                <td  class="table_seat"></td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </form>
        </div>
    </div>
    <!--底部-->
    <div class="tsg_footer">

    </div>
</div>
<!--退出预约系统模态框-->
<div class="modal fade" id="exit">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span >&times;</span></button>
                <h4 class="modal-title" style="color:darkorange">温馨提示</h4>
            </div>
            <div class="modal-body">
                <p>您确定要<b style="color: red">退出预约系统</b>？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a type="button" class="btn btn-primary" href="../../tushuguan/index.html">确认</a>
            </div>
        </div>
    </div>
</div>
<script src="assets/jquery/jquery.js"></script>
<script src="assets/bootstrap/js/bootstrap.js"></script>
<script src="js/userCommod.js"></script>
<script src="js/tsg_floor2.js"></script>
</body>
</html>